<template>
    <div class="comp">
      <!-- 放图表 -->
      <div class="echarts" ref="mwise"></div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        echartsInstance: null,
        allData: [], //业务数据
      };
    },
    beforeDestroy(){
        // 销毁组件之前移除监听器
        window.removeEventListener('click',this.adapTive)
    },
    mounted() {
      this.initEcharts();
      this.getData();
      //监听窗口变化实现图表自适应
      window.addEventListener('resize',this.adapTive)
      //调用适配方法
      this.adapTive()
    },
    methods: {
      //1. echarts实例初始化
      initEcharts() {
        this.echartsInstance = this.$echarts.init(this.$refs.mwise, "dark");
        //设置绘图需要的静态配置项
        let initOptions = {
           // 图例
           legend:{
                    show:true,
                    top:"15%"
                },
          // 标题
          title: {
            text: "▍种植农作物面积统计",
            top: "2%",
            left: "2%",
          },
          // 提示
          tooltip: {
            show: true,
          },
          // 图表类型
          series: [
            {
              type: "pie",
              label: {
                show: true
              },
              center:['50%','60%']
            },
          ],
        };
        // 绘制基础图表
        this.echartsInstance.setOption(initOptions);
      },
      // 获取业务数据
      async getData() {
        let { data } = await this.$http.get("TotalAreaCropsProportion");
        console.log(data);
        this.allData = data;
        //根据业务继续完善图表
        this.setEcharts();
      },
      // 根据业务完善图表
      setEcharts() {
        // 设置绘图配置项
        let setOptions={
                // 图表类型
                series:[
                    {
                        data:this.allData
                    }
                ]
            }
        // setOption 合并多次的绘图配置项 完善图表
        this.echartsInstance.setOption(setOptions);
      },
      // 窗口适配方法
      adapTive() {
        let width = this.$refs.mwise.offsetWidth;
  
        let scale = (width / 100) * 3.6;
  
        let adapOptions = {
          title: {
            textStyle: {
              fontSize: scale,
            },
          },
          // 柱子宽度
          series: [
            {
                radius:scale*5
            },
          ],
        };
        // 适配绘图
        this.echartsInstance.setOption(adapOptions);
        // 图标适配
        this.echartsInstance.resize();
      },
    },
  };
  </script>
  
  <style>
  </style>